<template>
  <div class="new_auction_billing">
    <c-title :hide="false" :text="pageTitle"></c-title>
    <div class="billing_r" v-if="$route.name == 'new_auction_billing'" @click="show = true">
      <i class="iconfont icon-a-shaixuan1"></i>
      筛选
    </div>
    <div class="list">
      <div class="lis" v-for="item in list" :key="item.id" @click="tapList(item)">
        <div class="lis_j">
          <div class="lis_j_l">{{ item.type_name }}</div>
          <div class="lis_j_r">{{ item.change_amount }}</div>
        </div>
        <div class="lis_j" style="margin-top: 0.53rem;">
          <div class="lis_j_t">{{ item.created_at }}</div>
          <div class="lis_j_p">{{ $i18n.t("money") }}{{ item.after_amount }}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '45%' }">
      <van-nav-bar>
        <template #right>
          <div class="icon_r" @click="show = false">
            <i class="iconfont icon-icon_close"></i>
          </div>
        </template>
        <template #left>
          <span class="txt_l">筛选</span>
        </template>
      </van-nav-bar>
      <div class="tagList">
        <div class="lis" :class="[typeInd == index ? 'select_lis' : '']" v-for="(item, index) in type_name" :key="index" @click="tapPopup(index)">{{ item }}</div>
      </div>
    </van-popup>
    <van-popup v-model="show_Detail" round position="bottom" :style="{ height: '45%' }" :close-on-click-overlay="false">
      <van-nav-bar>
        <template #right>
          <div class="icon_r" @click="closePopup_detail">
            <i class="iconfont icon-icon_close"></i>
          </div>
        </template>
        <template #left>
          <span class="txt_l">充值详情</span>
        </template>
      </van-nav-bar>
      <div class="list_or">
        <van-cell-group>
          <van-cell title-style="text-align: left;" :border="false">
            <template #title>
              <span>充值单号</span>
            </template>
            <template #default>
              <span v-if="detailInfo.has_one_order">{{ detailInfo.has_one_order.order_sn }}</span>
            </template>
          </van-cell>
          <van-cell title-style="text-align: left;" :border="false">
            <template #title>
              <span>充值金额</span>
            </template>
            <template #default>
              <span>{{ detailInfo.change_amount }}</span>
            </template>
          </van-cell>
          <van-cell title-style="text-align: left;" :border="false">
            <template #title>
              <span>充值方式</span>
            </template>
            <template #default>
              <span v-if="detailInfo.has_one_order">{{ detailInfo.has_one_order.pay_type_name }}</span>
            </template>
          </van-cell>
          <van-cell title-style="text-align: left;" :border="false">
            <template #title>
              <span>账户余额</span>
            </template>
            <template #default>
              <span>{{ detailInfo.after_amount }}</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      show: false,
      pageTitle: "",
      typeInd: 0,
      list: [],
      show_Detail: false,
      detailInfo: [],

      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    if (this.$route.name == "new_auction_billing") {
      this.pageTitle = "账单明细";
      this.getTypeList();
    } else if (this.$route.name == "new_auction_rechargeDetail") {
      this.pageTitle = "充值明细";
    }
    this.init();
    this.getList();
  },
  methods: {
    closePopup_detail() {
      this.show_Detail = false;
      this.detailInfo = [];
    },
    init() {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    },
    tapList(item) {
      if (this.$route.name == "new_auction_rechargeDetail") {
        this.detailInfo = item;
        this.show_Detail = true;
      }
    },
    async getTypeList() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.money", {}, "");
      if (result) {
        this.type_name = data.type_name;
        this.type_name[0] = "全部";
      } else {
        this.$toast(msg);
      }
    },
    async getList() {
      let json = {};
      if (this.typeInd) {
        json.money_type = this.typeInd;
      }
      if (this.$route.name == "new_auction_rechargeDetail") {
        json.money_type = "6";
      }
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.money", json, "");
      if (result) {
        this.list = data.data;
        this.isLoadMore = true;
        this.total_page = data.last_page;
      } else {
        this.$toast(msg);
      }
    },
    tapPopup(index) {
      this.typeInd = index;
      this.show = false;
      this.init();
      this.getList();
    },
    async getMoreData() {
      console.log(this.page >= this.total_page);
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          money_type: this.typeInd
        };
        if (this.$route.name == "new_auction_rechargeDetail") {
          json.money_type = "6";
        }
        let { data, msg, result } = await $http.post("plugin.new-auction.frontend.money", json, "");
        if (result) {
          this.list = this.list.concat(data.data);
          this.isLoadMore = true;
        } else {
          this.page = this.page - 1;
          this.isLoadMore = false;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.list_or {
  margin: 0.63rem 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  overflow: hidden;
}
.tagList {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.94rem;
  .lis {
    width: 5rem;
    height: 2rem;
    background: #f5f5f5;
    border-radius: 1rem 1rem 1rem 1rem;
    text-align: center;
    line-height: 2rem;
    margin: 0 0.5rem 0.88rem 0;
  }
  .select_lis {
    border-radius: 1rem 1rem 1rem 1rem;
    border: 0.03rem solid #f15353;
    color: #f15353;
    background: #feeded;
  }
  .lis:nth-child(4n) {
    margin-right: 0;
  }
}
.txt_l {
  font-weight: bold;
  font-size: 1rem;
  color: #00001c;
}
.icon_r {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #f0f0f1;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon-icon_close {
    font-size: 0.81rem;
  }
}

.new_auction_billing {
  overflow: hidden;
  .billing_r {
    text-align: right;
    padding-right: 1.63rem;
    margin: 0.97rem 0 0 0;
    font-size: 0.75rem;
    color: #6e6e79;
  }
  .list {
    display: flex;
    flex-direction: column;
    margin: 0 0.75rem;
    margin-top: 0.76rem;
    .lis {
      padding: 1rem 0.75rem;
      background: #fff;
      border-radius: 0.5rem;
      margin-bottom: 0.63rem;
      .lis_j {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .lis_j_l {
          font-weight: bold;
          font-size: 0.81rem;
        }
        .lis_j_r {
          font-weight: 500;
          font-size: 0.88rem;
          color: #f15353;
        }
        .lis_j_t {
          font-size: 0.81rem;
          color: #6e6e79;
        }
        .lis_j_p {
          font-size: 0.81rem;
          color: #6e6e79;
        }
      }
    }
  }
}
</style>
